<template>
	<view class="contacts">
		<view class="contacts-container">
			<view class="user-list">
				<view class="user-list-item" v-for="(group, uuid) in groups" :key="uuid" @click="enterChat(group.uuid, 'group')">
					<view class="user-item-avatar">
						<image :src="group.avatar" />
					</view>
					<view class="user-item-info">
						<span class="user-item-info__name">{{group.name}}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import IMService from "../../lib/imservice";
	export default {
		data() {
			return {
				groups: [
					{
						'avatar': "/static/images/uniapp.png",
						'name': "UniApp交流群",
						'userList': [
							"08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a",
							"fdee46b0-4b01-4590-bdba-6586d7617f95",
							"33c3693b-dbb0-4bc9-99c6-fa77b9eb763f"
						],
						'uuid': "group-4b01-4590-bdba-6586d7617f95"
					}
				]
			}
		},
		onShow() {
			let currentUser = uni.getStorageSync('currentUser');
			if(this.goEasy.getConnectionStatus() === 'disconnected') {
				getApp().globalData.imService= new IMService(this.goEasy,this.GoEasy);
				getApp().globalData.imService.connect(currentUser);
			}
		},
		methods: {
			enterChat (uuid, type) {// 进入组聊
				let path = '../center/index?to=' + uuid
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style>
	.contacts{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.contacts .contacts-container{
		width: 100%;
		overflow: auto;
	}

	.contacts .user-list-item{
	  height: 132rpx;
	  padding-left: 32rpx;
		display: flex;
		align-items: center;
	}
	.contacts .contacts-title{
		height: 80rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #666666;
		background: #F3F4F7;
		text-indent: 44rpx;
	}

	.contacts .user-list{
		flex-grow: 1;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}
	.contacts .user-item-avatar{
	  width: 96rpx;
	  height: 96rpx;
	  margin-right: 32rpx;
		overflow: hidden;
		position: relative;
	}
	.contacts .user-item-avatar image{
		width: 100%;
		height: 100%;
		display: block;
	}
	.contacts .user-item-info{
	  	height: 130rpx;
	  	padding-right: 32rpx;
	  	line-height: 88rpx;
		flex-grow: 1;
		border-bottom: 1px solid #EFEFEF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.contacts .user-item-info__name{
	  	font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-style: normal;
		font-weight: bold;
		color: #262628;
	}
</style>
